<template>
	<view class="container">
		<loading :show="loading_show && naviHeight"></loading>
		<move-button :show="returnTop_show" :navi_Height="naviHeight" :defaultBottom="280" :defaultRight="20" @returnTop="returnTop">
			<image class="returnTopImg" src="@/static/images/home/returnTop.png" mode="aspectFill"></image>
		</move-button>
		<move-button :show="storeInfo.poster && storeInfo.poster.show && coupon_list.length" :navi_Height="naviHeight" :defaultBottom="420" :defaultRight="20" @returnTop="poster_show = true">
			<image src="@/static/images/home/coupon_icon.png" mode="aspectFill"></image>
		</move-button>
		<customHead
			:slideFlag="slideFlag"
			:navi_background="_temp_themeColor"
			:slide_rotation="naviHeight?0.3:0"
		>
			<view class="title_text" slot="title" @click="gotoMyStore">
				<u-icon name="map-fill" size="20" :color="contrastColor"></u-icon>
				<text class="headLine" :style="{color: contrastColor}" v-if="currentFirm.exJson && currentFirm.exJson.storeName">
					{{currentFirm.exJson.storeName}}
				</text>
				<text class="headLine" :style="{color: contrastColor}" v-else>门店认证</text>
				<u-icon name="arrow-right" size="18" :color="contrastColor"></u-icon>
			</view>
			<view class="slide_box" slot="slide">
				<view class="input_box" @click="searchClick">
					<u-icon name="search" size="20" :color="_temp_themeColor"></u-icon>
					<text class="text">搜索</text>
				</view>
			</view>
		</customHead>
		<scroll-view 
			scroll-y="true" 
			class="main_scroll" 
			@scroll="scrollChange"
			:refresher-triggered="refresher_show"
			@refresherrefresh="refresherrefresh"
			@scrolltolower="scrolltolower"
			:scroll-with-animation="true"
			:refresher-enabled="true"
			:scroll-top="scrollTop"
			:refresher-background="_temp_themeColor"
		>
			<refresh-view :loading="refresher_show" :height="naviHeight" :background="_temp_themeColor" :color="contrastColor"></refresh-view>
			<view class="main_content _fade" v-if="naviHeight">
				<view class="content_top" :style="{backgroundImage: `linear-gradient(to bottom, ${_temp_themeColor}, rgba(255, 255, 255, 0) 460rpx)`}">
					<view class="content_swiper">
						<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" circular>
							<swiper-item v-for="(item, index) in swiperList" :key="index">
								<image class="image" lazy-load :src="item.activityImgUrl" mode="aspectFill" @load="loading = false"></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="content_menu" v-if="menuList.length">
						<view class="menu_item _clickActive" @click="gotoCateGory(item)" v-for="(item, index) in menuList" :key="index">
							<image class="" :src="item.icon" lazy-load mode="aspectFill"></image>
							<text :style="{color: _temp_textColor}">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="content_notice" v-if="noticeText" @click="gotoNotice">
						<u-notice-bar :text="noticeText"></u-notice-bar>
					</view>
					<view class="content_goods_stand border1" v-if="GoodStuffList.length">
						<view class="content_goods_stand_top _clickOpacity" @click="gotofaddish">
							<view class="top_text">
								<view class="top_left">
									<text class="desc1">好货超值</text>
									<text class="desc2">爆款白条，限量抢购！</text>
								</view>
								<view class="top_right">
									<text>更多</text>
									<u-icon name="arrow-right" color="#F88A08"></u-icon>
								</view>
							</view>
						</view>
						<scroll-view scroll-y="true" scroll-x class="scroll" :show-scrollbar="false">
							<view class="goods_box">
								<view class="goods_item" @click="gotoDetail(item.id)" v-for="(item, index) in GoodStuffList" :key="index">
									<image class="" :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
									<view class="goods-icon" v-if="item.videoUrl">
										<u-icon name="play-circle" color="#acacac" size="28"></u-icon>
									</view>
									<view class="goods_title">
										<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
									</view>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="content_goods_stand border2" v-if="todayHotList.length">
						<view class="content_goods_stand_top _clickOpacity" @click="gototodayHot">
							<view class="top_text">
								<view class="top_left">
									<text class="desc1 color">当日热销</text>
									<text class="desc2 color">鸡鸭牛肉畅销好价！</text>
								</view>
								<view class="top_right">
									<text class="color">更多</text>
									<u-icon name="arrow-right" color="#FF0000"></u-icon>
								</view>
							</view>
						</view>
						<scroll-view scroll-y="true" scroll-x class="scroll" :show-scrollbar="false">
							<view class="goods_box">
								<view class="goods_item" @click="gotoDetail(item.id)" v-for="(item, index) in todayHotList" :key="index">
									<image class="" :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
									<view class="goods-icon" v-if="item.videoUrl">
										<u-icon name="play-circle" color="#acacac" size="28"></u-icon>
									</view>
									<view class="goods_title">
										<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
									</view>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
					<view class="content_goods_list">
						<view class="goods_box">
							<view class="item_list_box " v-for="(item ,index) in itemList" :key="index">
								<view class="hot_sale" v-if="item.type === 'hot'">
									<view class="title_box _clickOpacity" @click="gotoRanking">
										<text class="title">热卖TOP榜</text>
										<text class="desc">今日销售冠军</text>
									</view>
									<view class="hot_goods_box">
										<view class="goods_item1" @click="gotoDetail(item.id)" v-for="(item, index1) in item.list" :key="index1">
											<image class="image " :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
											<text class="desc">top{{index1 + 1}}</text>
										</view>
									</view>
								</view>
								
								<view class="goods_item" @click="gotoDetail(item.id)" v-if="item.type === 'goods'">
									<image class="" :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
									<view class="goods-icon" v-if="item.videoUrl">
										<u-icon name="play-circle" color="#acacac" size="28"></u-icon>
									</view>
									<view class="goods_title">
										<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
									</view>
									<view class="desc">
										<text :style="{color: _temp_textColor}">{{item.goodsRemarks}}</text>
									</view>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
								
								<view class="category_hot_sale" v-if="item.type === 'cate'">
									<view class="title_box" @click="gotoRankingListAll(item.categoryId)">
										<text class="title">{{item.categoryName}}热卖榜</text>
										<u-icon name="arrow-right" size="18" color="#fff"></u-icon>
									</view>
									<view class="content">
										<view class="content_item" @click="gotoDetail(item.id)" v-for="(item, index1) in item.list" :key="index1">
											<view class="image_box">
												<view class="sort_icon" :class="[index1<3?`back${index1}`:'back']">
													<text class="top">TOP</text>
													<text class="text">{{index1+1}}</text>
												</view>
												<image class="" :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
											</view>
											<view class="item_right">
												<view class="title_text1">
													<text class="desc_text" :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
												</view>
												<view class="price">
													<view class="" v-if="currentFirm.id">
														<span>￥</span>
														<text>
															{{item.goodsPrice}}
														</text>
													</view>
													<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
													<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="" style="height: 188rpx;"></view>
			</view>
		</scroll-view>
		<tabbar :current="0" :cart="totalCartNum"></tabbar>
		<poster-popup
			v-if="poster_show"
			:image="poster_image"
			@close="poster_show = false"
			:coupon_list="coupon_list"
			:title="storeInfo.poster.title"
			:desc="storeInfo.poster.desc"
			@click="gotoCoupon"
		></poster-popup>
	</view>
</template>

<script>
	import {
		getApplicationPlugsRecommendedList,
		searchPlugsGoodCategoryList,
		searchPlugsGoodsByCategoryId,
		searchPlugsNoticeList,
		searchPlugsHotGoodsList,
		searchHotGoodsList,
		searchPlugsCouponsByBusinessId 
	} from "@/tools/request/api.js"
	import { mapState, mapActions, mapMutations } from 'vuex'
	import { makeContrast, makeLightColor, makeContrastWB } from '@/tools/utils/colorful.js'
	
	export default {
		data() {
			return {
				show: false,
				swiperList: [],
				menuList: [],
				goodsList: [],
				GoodStuffList: [],
				todayHotList: [],
				loading_show: false,
				refresher_show: false,
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				categoryList: [],
				categoryItemIndex: 0,
				scrollTop: 0,
				returnTop_show: false,
				rightPx: 0,
				slideFlag: false,
				itemList: [],
				noticeText: '',
				poster_show: false,
				poster_image: [],
				coupon_list: [],
			}
		},
		computed: {
			...mapState('firm_store', ['currentFirm']),
			// contrastColor () {
			// 	let contrast_color = makeContrast(this._temp_themeColor);
			// 	return contrast_color;
			// }
			
			contrastColor () {
				let contrast_color = makeContrastWB(this._temp_themeColor);
				return contrast_color;
			}
		},
		onHide () {
			this.poster_show = false;
		},
		onLoad (option) {
			this.loading_show = true;
			this.IS_APP_DONE((res) => { //登陆完成会调用
				this.get_coupon_list();
				this.getShopCartList();
				this.getFirmList();
			});
			this.IS_BUSINESS_DONE((res) => { //店铺信息获取完成会调用,切换店铺后也会调用
				this.goodsList = [];
				this.getSwiperList();
				this.getCategoryList();
				this.getNoticeList();
				if (this.accessToken) {
					this.get_coupon_list();
				}
			})
			if (option.scene) {
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${option.scene}`
				})
			}
		},
		methods: {
			...mapActions('firm_store', ['getFirmList']),
			...mapMutations('app_store', ['IS_APP_DONE']),
			...mapMutations('business_store', ['IS_BUSINESS_DONE']),
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			gotoRankingListAll (id) {
				uni.navigateTo({
					url: `/subpack_home/rankingListAll/rankingListAll?categoryId=${id}`
				})
			},
			gotoMyStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			// 优惠券页面
			gotoCoupon () {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: '../../subpack_my/coupon/coupon'
				})
			},
			gotoRanking () {
				uni.navigateTo({
					url: '../../subpack_home/rankingList/rankingList'
				})
			},
			searchClick () {
				uni.navigateTo({
					url: '../../subpack_home/search/search'
				})
			},
			
			gotofaddish () {
				uni.navigateTo({
					url: '../../subpack_home/faddish/faddish'
				})
			},
			gototodayHot () {
				uni.navigateTo({
					url: '../../subpack_home/todayHot/todayHot'
				})
			},
			gotoCateGory (item) {
				uni.setStorageSync('categoryItemId', item.id);
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
			gotoDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			gotoNotice () {
				uni.navigateTo({
					url: '/subpack_home/noticeList/noticeList'
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			getSwiperList() {
				let data = {
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				getApplicationPlugsRecommendedList(data).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						let list = res.body;
						this.swiperList = list.filter(item => item.type == 'home_data');
						// this.poster_image = list.filter(item => item.type == 'poster');
					}
				})
			},
			getPosterImg () {
				if (this.storeInfo.poster.show == 0) return;
				this.poster_image = this.storeInfo.poster.image;
				if (!uni.getStorageSync('isShwoPoster')) {
					this.poster_show = true;
				} else {
					return;
				}
				uni.setStorageSync('isShwoPoster', true);
			},
			// 获取店铺所有优惠券
			get_coupon_list () {
				let postdata = {
					businessId: this.businessId,
					page: 1,
					size: 100,
					userServiceToken: this.userServiceToken
				};
				searchPlugsCouponsByBusinessId(postdata).then((res) => {
					if (res.code != 200) return uni.$showMsg();
					this.coupon_list = res.body.list;
					this.getPosterImg();
				});
			},
			// 获取通知信息
			getNoticeList () {
				let data = {
					page: 1,
					size: 100,
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				searchPlugsNoticeList(data).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					let list = res.body.list;
					let noticeArr = list.filter(item => item.type == 'home_one');
					if (!noticeArr.length) return;
					let str = noticeArr[0].extJson;
					// str = str.split('>')[1];
					// str = str.split('<')[0];
					this.noticeText = str;
				})
			},
			// 设置顶部分类
			setCategoryTop (list) {
				let menuList = [];
				for (let i = 0; i < 5; i++) {
					menuList.push(list[i]);
				}
				this.menuList = menuList;
			},
			// 获取商品分类列表
			getCategoryList () {
				// this.loading_show = true;
				let data = {
					page: 1,
					size: 100,
					adminId: this.adminId,
					id: 143,
					keyword: '',
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				searchPlugsGoodCategoryList(data).then(res => {
					this.loading_show = false;
					if (this.refresher_show) {
						this.goodsPage.page = 1;
						this.itemList = [];
					}
					// this.loading_show = false;
					this.refresher_show = false;
					if (res.code != 200) return uni.$showMsg();
					this.categoryList = res.body.list;
					this.setCategoryTop(res.body.list);
					if (!this.categoryList.length) return;
					this.getSupposeList();
				})
			},
			// 获取页面主要商品列表
			async getSupposeList () {
				this.getTodayHot();
			},
			// 获取热卖TOP榜
			async getTodayHot () {
				let list = await this.getGoodsList('-1');
				if (!list.length) return;
				if (!this.itemList.length) {
					let itemList = [];
					for (let i = 0; i < 4; i++) {
						itemList.push(list[i]);
					}
					this.itemList[0] = {
						type: 'hot',
						list: itemList
					};
				}
				this.getSalesVolumeByCateAll(list);
				this.getGoodStuffList(list);
				this.getTodayHotList(list);
			},
			// 获取全分类下的商品列表
			getSalesVolumeByCateAll (list) {
				list.forEach((item) => {
					item.type = 'goods';
					this.itemList.push(item);
				})
				this.getSalesVolumeByCate();
			},
			// 获取分类下的商品销售排行
			async getSalesVolumeByCate () {
				let cateId = this.categoryList[this.categoryItemIndex].id.toString();
				let list = await this.getGoodsList(cateId, 1, 3); // page; size
				let itemList = [];
				list.forEach((item, index) => {
					itemList.push(item);
				})
				this.itemList.push({
					type: 'cate',
					list: itemList,
					categoryName: this.categoryList[this.categoryItemIndex].categoryName,
					categoryId: this.categoryList[this.categoryItemIndex].id.toString()
				})
				this.categoryItemIndex++;
			},
			// 根据分类id获取销量排行列表
			async getGoodsList (id, page, size) {
				let data = {
					page: page? page: this.goodsPage.page,
					size: size? size: this.goodsPage.size,
					businessId: this.businessId,
					// categoryId: id,
					recommendationStatus: 1
				};
				// this.loading_show = true;
				let res = await searchHotGoodsList(data);
				// this.loading_show = false;
				if (res.code != 200) return uni.$showMsg();
				this.goodsPage.totalPage = res.body.pages;
				this.goodsPage.hasNextPage = res.body.hasNextPage;
				let list = res.body.list;
				list.forEach((item) => {
					if (item.rotationImgsJson) {
						item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
					}
				})
				this.refresher_show = false;
				return list;
			},
			// 获取好货超值列表
			getGoodStuffList (list) {
				if (this.GoodStuffList.length) return;
				let stuffList = [];
				for (let i = 0; i < 5; i++) {
					if (i > list.length - 1) break;
					stuffList.push(list[i]);
				}
				this.GoodStuffList = stuffList;
			},
			// 获取当日热销列表
			getTodayHotList (list) {
				if (this.todayHotList.length) return;
				let todayList = [];
				for (let i = 0; i < 5; i++) {
					if (i > list.length - 1) break;
					todayList.push(list[i]);
				}
				this.todayHotList = todayList;
			},
			// 下拉刷新
			refresherrefresh () {
				this.refresher_show = true;
				this.goodsPage.page = 1;
				this.getCategoryList();
			},
			// 滚动到底部加载更多
			scrolltolower () {
				if (!this.goodsPage.hasNextPage) return
				this.goodsPage.page++;
				this.getSupposeList();
			},
			scrollChange (e) {
				if (e.detail.scrollTop >= 42) {
					if (!this.slideFlag) {
						this.slideFlag = true;
					}
				} else {
					if (this.slideFlag) {
						this.slideFlag = false;
					}
				}
				if (e.detail.scrollTop >= 900) {
					if (!this.returnTop_show) {
						this.returnTop_show = true;
					}
				} else {
					if (this.returnTop_show) {
						this.returnTop_show = false;
					}
				}
			},
			// 回到顶部
			returnTop () {
				this.scrollTop = 1;
				setTimeout(() => {
					this.scrollTop = 0;
				},0)
				this.returnTop_show = false;
			},
		},
		onShareAppMessage() {
			let shop = uni.getStorageSync('__ddminiStoreInfo');
			return {
				title: shop.shop_share_title || shop.shop_name,
				imageUrl: shop.shop_share_pic || shop.shop_logo,
				path: 'pages/index/index'
			}
		},
		onShareTimeline () {
			return {
				title: ''
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
			
		image{
			width: 80rpx;
			height: 80rpx;
		}
		
		.coupon{
			position: fixed;
			right: 0;
			bottom: 420rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999999999;
			
			.returnTopImg{
				width: 80rpx;
				height: 80rpx;
			}
		}
		
		.title_text{
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			
			.headLine{
				padding: 0 10rpx;
			}
		}
		
		.slide_box{
			width: 100%;
			height: 84rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			
			.input_box{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: flex;
				justify-content: center; 
				align-items: center;
				background-color: #fff;
				
				.text{
					font-size: 26rpx;
					color: #9f9f9f;
				}
			}
		}
		
		.main_content{
			
			.content_top{
				// background-image: linear-gradient(to bottom, rgba(1, 203, 136, 1), rgba(1, 203, 136, 0) 460rpx);
				padding: 0 20rpx;
				
				.content_swiper{
					border-radius: 20rpx;
					overflow: hidden;
					
					.swiper{
						width: 100%;
						height: 320rpx;
						
						.image{
							width: 100%;
							height: 320rpx;
							border-radius: 20rpx;
						}
					}
				}
				.content_menu{
					width: 100%;
					// height: 160rpx;
					margin-top: 20rpx;
					background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 80rpx);
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					border-radius: 20rpx;
					
					.menu_item{
						display: flex;
						flex: 0 0 20%;
						flex-direction: column;
						align-items: center;
						
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 40%;
						}
						text{
							font-size: 26rpx;
							// color: #7c7c7c;
							padding: 10rpx 0;
						}
					}
				}
			}
			
			.content{
				padding: 30rpx 20rpx;
				padding-top: 0rpx;
				box-sizing: border-box;
					
				
				.content_notice{
					width: 100%;
					// height: 80rpx;
					// padding: 20rpx 0;
					border: 2rpx solid #FFD28F;
					border-radius: 20rpx;
					overflow: hidden;
				}
				
				.content_notice /deep/ .u-notice-bar{
					padding: 14rpx 10rpx;
				}
				
				.border1{
					border: 4rpx solid #FFD28F;
					background-image: linear-gradient(to bottom, rgba(255, 241, 225, 1), rgba(255, 241, 225, 0) 100rpx);
				}
				.border2{
					border: 4rpx solid #FFA6A2;
					background-image: linear-gradient(to bottom, rgba(255, 232, 218, 1), rgba(255, 232, 218, 0) 100rpx);
				}
				.content_goods_stand{
					width: 100%;
					// height: 440rpx;
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #fff;
					border-radius: 20rpx;
					padding-bottom: 30rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					box-sizing: border-box;
					
					.content_goods_stand_top{
						width: 100%;
						
						.top_text{
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 20rpx;
							box-sizing: border-box;
							
							.top_left{
								display: flex;
								align-items: center;
								box-sizing: border-box;
								
								.desc1{
									font-size: 40rpx;
									font-weight: bold;
									color: #F88A08;
									padding-right: 20rpx;
								}
								.desc2{
									font-size: 26rpx;
									color: #F88A08;
									border-left: 2rpx solid #F88A08;
									padding-left: 20rpx;
								}
								.color{
									color: #FF0000;
								}
							}
							.top_right{
								display: flex;
								align-items: center;
								
								text{
									font-size: 26rpx;
									color: #F88A08;
								}
								.color{
									color: #FF0000;
								}
							}
							
						}
					}
					.scroll{
						// height: 320rpx;
						white-space: nowrap;
						
						.goods_box{
							display: flex;
							margin-top: 20rpx;
							
							.goods_item{
								width: 33.33%;
								padding: 0 15rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
								position: relative;
								
								.goods-icon {
									position: absolute;
									top: 10rpx;
									right: 10rpx;
								}
								
								.goods_title{
									// max-height: 3em;
									// white-space: normal;
									// display: -webkit-box;
									// -webkit-line-clamp: 2;
									// -webkit-box-orient: vertical;
									// overflow: hidden;
									// text-overflow: ellipsis;
									// line-height: 50rpx;
									
									width: 100%;
									margin-top: 20rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								
								image{
									width: 200rpx;
									height: 200rpx;
									border-radius: 10rpx;
								}
								
								.price{
									width: 100%;
									margin-top: 20rpx;
									font-size: 30rpx;
									color: #FF0000;
									font-weight: bold;
									display: flex;
									justify-content: space-between;
									align-items: center;
									
									span{
										font-size: 30rpx;
									}
									.image{
										width: 50rpx;
										height: 50rpx;
									}
									.desc_text{
										font-size: 26rpx;
										color: #aaaaaa;
									}
								}
							}
						}
					}
				}
				.content_goods_list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.goods_box{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						
						.item_list_box{
							width: 48%;
							overflow: hidden;
							// column-count: 2;
							// column-gap: 20rpx;
							
							
							.hot_sale{
								// width: 48%;
								width: 100%;
								background-image: linear-gradient(to right, #FF001D, #ff4810);
								padding: 15rpx 15rpx;
								box-sizing: border-box;
								border-radius: 20rpx;
								margin-top: 20rpx;
								// break-inside: avoid; // 不被截断 默认值是auto，会被截断
								
								.title_box{
									display: flex;
									flex-direction: column;
									align-items: center;
									
									.title{
										color: #fff;
										font-size: 40rpx;
									}
									.desc{
										color: #fff;
										font-size: 20rpx;
									}
								}
								.hot_goods_box{
									width: 100%;
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									justify-content: space-between;
									
									.goods_item1{
										flex: 0 0 48%;
										display: flex;
										flex-direction: column;
										align-items: center;
										border-radius: 10rpx;
										overflow: hidden;
										background-color: #fff;
										margin-top: 10rpx;
										
										.image{
											width: 150rpx;
											height: 150rpx;
											border-radius: 10rpx;
										}
										text{
											display: block;
											width: 100%;
											font-size: 24rpx;
											padding: 6rpx 0;
											background-color: #FDE6C1;
											text-align: center;
											color: #A25B0B;
										}
									}
								}
							}
							
							.category_hot_sale{
								// width: 48%;
								width: 100%;
								background-image: linear-gradient(to right, #FF001D, #ff4810);
								box-sizing: border-box;
								margin: 20rpx 0;
								border-radius: 20rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 5rpx;
								// break-inside: avoid; // 不被截断 默认值是auto，会被截断
								
								.title_box{
									display: flex;
									align-items: center;
									justify-content: center;
									padding: 20rpx 0;
									
									.title{
										color: #fff;
										font-size: 40rpx;
									}
								}
								.content{
									width: 100%;
									display: flex;
									flex-direction: column;
									background-color: #fff;
									border-radius: 20rpx;
									
									.content_item{
										display: flex;
										align-items: center;
										border-bottom: 1rpx solid #ddd;
										padding: 10rpx 0;
										
										.image_box{
											width: 100rpx;
											height: 100rpx;
											position: relative;
											
											.sort_icon{
												color: #fff;
												position: absolute;
												z-index: 999;
												top: -5rpx;
												left: 0;
												display: flex;
												flex-direction: column;
												align-items: center;
												padding-top: 4rpx;
												padding-left: 5rpx;
												padding-right: 4rpx;
												border-radius: 5rpx;
												
												.top{
													font-size: 14rpx;
												}
												
												.text{
													font-size: 20rpx;
												}
											}
											.back0{
												background-image: linear-gradient(to bottom, #ff606b, #ff404d);
											}
											.back1{
												background-image: linear-gradient(to bottom, #FF9843, #FF5810);
											}
											.back2{
												background-image: linear-gradient(to bottom, #FFC54B, #FFAD4C);
											}
											.back{
												background-image: linear-gradient(to bottom, #30FABB, #14DA9B);
											}
											
											image{
												width: 100%;
												height: 100%;
											}
										}
										
										.item_right{
											flex: 1;
											display: flex;
											flex-direction: column;
											// align-items: center;
											margin-left: 20rpx;
											
											.title_text1{
												font-size: 24rpx;
												white-space: normal;
												display: -webkit-box;
												-webkit-line-clamp: 2;
												-webkit-box-orient: vertical;
												overflow: hidden;
												text-overflow: ellipsis;
											}
											
											.price{
												width: 100%;
												margin-top: 20rpx;
												font-size: 30rpx;
												color: #FF0000;
												font-weight: bold;
												display: flex;
												justify-content: space-between;
												align-items: center;
												
												span{
													font-size: 30rpx;
												}
												.image{
													width: 30rpx;
													height: 30rpx;
												}
												.desc_text{
													font-size: 22rpx;
													color: #aaaaaa;
												}
											}
										}
									}
									.content_item:last-child{
										border: none;
									}
								}
							}
							
							.goods_item{
								width: 100%;
								padding: 0 15rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								background-color: #fff;
								padding: 30rpx 20rpx;
								box-sizing: border-box;
								border-radius: 20rpx;
								margin-top: 26rpx;
								position: relative;
								
								.goods-icon {
									position: absolute;
									top: 10rpx;
									right: 10rpx;
								}
								
								.goods_title{
									// width: 100%;
									// max-height: 3em;
									// white-space: normal;
									// display: -webkit-box;
									// -webkit-line-clamp: 2;
									// -webkit-box-orient: vertical;
									// overflow: hidden;
									// text-overflow: ellipsis;
									// line-height: 50rpx;
									// margin-top: 20rpx;
									
									width: 100%;
									margin-top: 20rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.desc{
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: normal;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									font-size: 28rpx;
									color: #9a9a9a;
									margin-top: 14rpx;
								}
								
								image{
									width: 280rpx;
									height: 280rpx;
									border-radius: 10rpx;
								}
								.price{
									width: 100%;
									margin-top: 20rpx;
									font-size: 30rpx;
									color: #FF0000;
									font-weight: bold;
									display: flex;
									justify-content: space-between;
									align-items: center;
									
									span{
										font-size: 30rpx;
									}
									.image{
										width: 50rpx;
										height: 50rpx;
									}
									.desc_text{
										font-size: 26rpx;
										color: #aaaaaa;
									}
								}
							}
							// .goods_item:nth-child(2n){
							// 	margin-top: 100rpx;
							// }
						}
					}
				}
			}
		}
		
		.main_scroll{
			width: 100%;
			height: 100vh;
			flex: 1;
		}
	}
		
</style>
